 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
<title th:text="${title}">  </title>
<div th:include="header :: gridheader"></div>

 <script  th:inline="javascript">
 function renderData(data)
	{    //the default stype part for  gridweb component  is Stylemycomponent
		$("#Stylemycomponent").remove(); 
		//need to render gridweb ,this will trigger reinit of gridweb component
		 //the default   name for  gridweb component is mycomponent
		gridwebinstance.remove("mycomponent") ;
		$("#gridweb").html(data);
	}
	function doClick(method) {
		$.post("WebCellsServlet", {
			flag : method.id,
			gridwebuniqueid : $("#mycomponent").attr("webuniqueid"),
			columnIndex : $("#columnIndex").val(),
			rowIndex : $("#rowIndex").val(),
			startRow : $("#startRow").val(),
			startColumn : $("#startColumn").val(),
			rowNumber : $("#rowNumber").val(),
			columnNumber : $("#columnNumber").val(),
			startRow_c : $("#startRow_c").val(),
			startColumn_c : $("#startColumn_c").val(),
			comment : $("#comment").val()
		}, function(data) {
          renderData(data);
		}, "html");
	}
	
	//页面加载
	$(document).ready(function(){
	  $(":button").bind('click', function(){ doClick(this); }); 
		 
		doClick({id : "reload"});
	});
</script>
</head>
<body>
	<div>
		<p th:text="  ${info} ">
           
        </p>
	</div>

	<div>
				Click <b>Reload</b> to reload data from data source. Click
			<ul>
				<li><b>Insert Column</b> to see how demo inserts a column</li>
				<li><b>Insert Row</b> to see how demo inserts a row</li>
				<li><b>Delete Row</b> to see how demo deletes a row</li>
				<li><b>Delete Column</b> to see how demo deletes a column</li>
			</ul>
		
	</div>

	<div>
		<table>
			<tr>
				<th>Reload Data:</th>
				<td><input id="reload" type="button" value="Reload" /></td>
			</tr>
			<tr>
				<th>Insert/Delete Column:</th>
				<td>ColumnIndex:<input type="text" id="columnIndex" value="2" style="width: 20px;"/>
					<input id="inserColumn" type="button" value="Insert Column" />
					<input id="deleteColumn" type="button" value="Delete Column" />
				</td>
			</tr>
			<tr>
				<th>Insert/Delete Row:</th>
				<td>RowIndex:<input type="text" id="rowIndex" value="2" style="width: 20px;"/>
					<input id="insertRow" type="button" value="Insert Row" />
					<input id="deleteRow" type="button" value="Delete Row" />
				</td>
			</tr>
			<tr>
				<th>Merge Cells:</th>
				<td>StartRow:<input type="text" id="startRow" value="0" style="width: 20px;"/>
				StartColumn:<input type="text" id="startColumn" value="0" style="width: 20px;"/>
				RowNumber:<input type="text" id="rowNumber" value="3" style="width: 20px;"/>
				ColumnNumber:<input type="text" id="columnNumber" value="2" style="width: 20px;"/>
				<input id="mergeCells" type="button" value="Merge Cells" /> 
				 </td> 
			</tr>
			<tr>
				<th>Add/Remove Comment: </th>
				<td>StartRow:<input type="text" id="startRow_c" value="1" style="width: 20px;"/>
				StartColumn:<input type="text" id="startColumn_c" value="1" style="width: 20px;"/>
				Comment:<input type="text" id="comment" value="This is my comment."/>
				<input id="addComment" type="button" value="Add Comment" />
				<input id="removeComment" type="button" value="Remove Comment" />
				</td>
			</tr>
		</table>
	</div>
	
	<div id="gridweb"></div>
</body>
</html>